<template>
	<tm-fullView>
		<template v-slot:default="{ info }">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''" :style="{ minHeight: info.height + 'px' }">
				<tm-menubars title="导航工具栏" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>

				<view><tm-bottomnavigation icon-color="red" :list="list_1"></tm-bottomnavigation></view>

				
				<!-- #ifdef H5 -->
				<tm-bottomnavigation
					bg-theme="bg-gradient-blue-accent"
					position="top"
					border="bottom"
					:top="navTop"
					icon-color="yellow"
					icon-color-grey="white"
					:safe="false"
					:list="list_top"
				></tm-bottomnavigation>

				<view>
					<tm-bottomnavigation
						:safe="false"
						bg-theme="bg-gradient-pink-accent"
						icon-color-grey="white"
						:round="24"
						:offset-left="32"
						position="bottom"
						:bottom="100"
						border=""
						icon-color="yellow"
						:list="list_3"
					></tm-bottomnavigation>
				</view>
				<view style="height: 200upx;"></view>
				<tm-sheet color="green text ">
					<view class="text-size-s text-weight-b mb-24 ">也可以静态不悬浮作为工具栏使用</view>
					<view class="text-size-xxs mb-24">
						提醒：不要在非H5端同一页面使用此多个组件时图片图标和图标名称混用，会造成数据错乱，我也找不到原因，暂时。如有知道原因的可告知。
					</view>
					<tm-bottomnavigation
						:safe="false"
						bg-theme="bg-gradient-green-accent"
						icon-color-grey="white"
						position="static"
						:round="4"
						:offset-left="32"
						:bottom="100"
						:top="45"
						border=""
						icon-color="yellow"
						:list="list_2"
					></tm-bottomnavigation>
				</tm-sheet>

				<!-- #endif -->
			</view>
		</template>
	</tm-fullView>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmBottomnavigation from "@/tm-vuetify/components/tm-bottomnavigation/tm-bottomnavigation.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmBottomnavigation},
	data() {
		return {
			list_1: [
				{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/elf-freebie-icon.png', value: '标题' },
				{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/house-snowglobe-freebie-icon.png', value: '标题' },
				{ iconSize: 46, icon: 'icon-plus', value: '标题',custom:true,customFontColor:'white',path:'/subpages/com/bottomnavigation'},
				{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/christmas-tree-freebie-icon.png', value: '标题' },
				{ iconSize: 46, icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/tree-freebie-icon.png', value: '标题' }
			],
			list_2: [
				{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
				{
					iconSize: 36,
					icon: 'icon-times',
					value: '标题',
					custom: true,
					customColor: 'yellow'
				},
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' }
			],
			list_3: [
				{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
				{
					iconSize: 36,
					icon: 'icon-times',
					value: '标题',
					custom: true,
					customColor: 'yellow',
					customFontColor:'white'
				},
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
				{
					iconSize: 36,
					icon: 'icon-times',
					value: '标题',
					custom: true,
					customColor: 'yellow',
					customFontColor:'white'
				}
			],
			list_top: [
				{ iconSize: 36, icon: 'icon-position-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-smile-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-user-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-clock-fill', value: '标题' },
				{ iconSize: 36, icon: 'icon-headset-fill', value: '标题' }
			],
			navTop: 45
		};
	},
	onLoad() {
		// #ifndef H5
		this.navTop = 100;
		// #endif

	},
	methods: {}
};
</script>

<style></style>
